<template>
    <el-card shadow="never" class="layout" style="width: 100%">
        <div class="pre">
            <div class="pre_title">
                <div class="title-text">
                    <p>{{ props.title }}</p>
                    <el-popover
                        placement="top-start"
                        trigger="hover"
                        effect="dark"
                        content="包含变更前的区域数据，退群微信用户不统计">
                        <template #reference>
                            <div><img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" /></div>
                        </template>
                    </el-popover>
                </div>
                <el-button :disabled="!isNoMessage1" @click="export2Img(myRef_one, props.title)">导出</el-button>
            </div>
            <div class="cust_qs">
                <el-radio-group v-model="custId" @change="changeId">
                    <el-radio-button v-for="item in props.btnList" :key="item.id" :label="item.id">{{
                        item.text
                    }}</el-radio-button>
                </el-radio-group>
            </div>
            <div id="echarts" ref="myRef_one" class="min"></div>
            <!-- <div class="min" v-show="isNoMessage1" ref="myRef_one" id="echarts"></div> -->
            <!-- <div class="no_data" v-show="!isNoMessage1">
        <img class="no_img" src="@/assets/noData.png" alt="" />
        <div class="no_title">暂无数据</div>
      </div> -->
        </div>
    </el-card>
</template>

<script lang="ts" setup>
import { ref, inject, nextTick, watch } from 'vue';
import { export2Img } from '@/utils/utils';
const echarts = inject('ec');
const myRef_one = ref();
const isNoMessage1 = ref(false);
const emit = defineEmits(['changeType']);
const custId = ref(1);
const props = defineProps(['title', 'browseData']);
const getEcharts2 = (data: any) => {
    if (data.length <= 0) {
        isNoMessage1.value = false;
        // return
    } else {
        isNoMessage1.value = true;
    }
    const myChart_one = echarts.init(myRef_one.value);
    myChart_one.setOption({
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            bottom: 'bottom'
        },
        series: [
            {
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    alignTo: 'edge',
                    formatter: '{name|{b}}\n{time|{c} 人｜}{time|{d} %}',
                    minMargin: 5,
                    edgeDistance: 10,
                    lineHeight: 15,
                    rich: {
                        time: {
                            fontSize: 10,
                            color: '#999'
                        }
                    }
                },
                labelLine: {
                    length: 15,
                    length2: 20,
                    lineStyle: {
                        width: 1
                    },
                    maxSurfaceAngle: 20
                },
                name: props.title,
                type: 'pie',
                data: data,
                color: ['#EF87F9', '#BCEE80', '#FED549', '#89B9F0', '#FF9D23'],
                radius: '80%'
            }
        ]
    });
    nextTick(() => {
        myChart_one.resize();
    });
    window.onresize = function () {
        myChart_one.resize();
    };
};
const changeId = () => {
    emit('changeType', custId.value);
};
watch(
    () => props.browseData,
    val => {
        getEcharts2(val);
    }
);
</script>

<style lang="scss" scoped>
.layout {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    :deep .el-card__body {
        width: 100%;
        box-sizing: border-box;
    }

    .help_icon {
        vertical-align: baseline;
        margin: 3px 0 0 8px;
        width: 16px;
    }

    .pre {
        height: 546px;
        box-sizing: border-box;
        background: #fff;
        margin-bottom: 1%;

        &_title {
            // width: 100%;
            padding-bottom: 14px;
            border-bottom: 1px solid #eaeaea;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 9999;
        }

        .title-text {
            display: flex;
            align-items: center;

            // line-height: 38px;
        }

        .min {
            width: 36vw;
            height: 400px;
            margin: 0 auto;
        }
    }

    .no_data {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .no_img {
            margin-left: 24px;
        }

        .no_title {
            color: #909399;
            font-size: 14px;
        }
    }

    .cust_qs {
        margin: 20px 0;
    }
}
</style>
